<template>
  <div class="page-container">
    <!-- 快递员配送轮播图 -->
    <el-carousel 
     height="450px"
     :interval="3000" 
     arrow="always" 
     indicator-position="outside"
    >
      <el-carousel-item v-for="(image, index) in deliveryImages" :key="index">
        <div class="carousel-container">
      <img 
        :src="`/src/assets/img/${image}`" 
        :alt="`轮播图${index + 1}`" 
        class="carousel-image"
      >
      <div class="carousel-caption">
        <h3>配送员风采 {{ index + 1 }}</h3>
        <p>专业物流，准时送达</p>
      </div>
    </div>
      </el-carousel-item>
    </el-carousel>

    <!-- 搜索栏 -->
    <el-card class="search-card">
      <el-form :inline="true" :model="queryDeli" class="search-form">
        <el-form-item label="姓名">
          <el-input v-model="queryDeli.name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="queryDeli.phone" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="queryDeli.status" placeholder="请选择状态">
            <el-option label="全部" value="" />
            <el-option label="空闲" value="0" />
            <el-option label="忙碌" value="1" />
            <el-option label="离线" value="2" />
          </el-select>
          <p>当前选择的状态值：{{queryDeli.status}} (类型：{{typeof queryDeli.status}})</p>

        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 配送员卡片网格 -->
    <div class="deliverymen-card-grid">
      <div v-for="man in deliverMen" :key="man.id" class="deliveryman-card">
        <div class="deliveryman-card-header">
          <div class="deliveryman-avatar">
            <el-icon><User /></el-icon>
          </div>
          <div class="deliveryman-info">
            <div class="deliveryman-name">{{ man.name }}</div>
            <div class="deliveryman-status">
              <el-tag :type="getStatusType(man.status)">
                {{ getStatusText(man.status) }}
              </el-tag>
            </div>
          </div>
        </div>
        <div class="deliveryman-card-body">
          <div><b>手机号：</b>{{ man.phone }}</div>
          <div><b>当前位置：</b>{{ man.currentLocation || '-' }}</div>
          <div><b>今日订单：</b>{{ man.count }}</div>
          <div><b>注册时间：</b>{{ man.registerTime }}</div>
        </div>
        <div class="deliveryman-card-actions">
          <el-button type="primary" link @click="handleEdit(man)">编辑</el-button>
          <el-button type="primary" link @click="handleResetPassword(man)">重置密码</el-button>
          <el-button
            type="primary"
            link
            @click="handleToggleStatus(man)"
          >
            {{ man.status === 'offline' ? '启用' : '禁用' }}
          </el-button>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="queryDeli.current"
        v-model:page-size="queryDeli.size"
        :page-sizes="[3, 6, 9, 12]"
        :total="queryDeli.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 添加/编辑配送员对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogType === 'add' ? '添加配送员' : '编辑配送员'"
      width="500px"
    >
      <el-form
        ref="deliverymanFormRef"
        :model="handelAdd"
        :rules="deliverymanRules"
        label-width="100px"
      >
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="密码" prop="password" v-if="dialogType === 'add'">
          <el-input
            v-model="form.password"
            type="password"
            placeholder="请输入密码"
            show-password
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handelQx">取消</el-button>
          <el-button type="primary" @click="handelAdd">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 新颖彩色路程图 -->
    <div class="colorful-timeline-new">
      <div class="timeline-step" v-for="(step, index) in timelineSteps" :key="index">
        <div class="step-icon" :style="{ backgroundColor: step.color }">
          {{ index + 1 }}
        </div>
        <div class="step-content">
          <h3>{{ step.title }}</h3>
          <p>{{ step.description }}</p>
        </div>
        <div class="step-line" v-if="index < timelineSteps.length - 1" :style="{ background: 'linear-gradient(to right, ' + step.color + ', ' + timelineSteps[index + 1].color + ')' }"></div>
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {adminDeliverySouSu,adminDeliveryAdd} from "@/assets/admin.js";

// 搜索表单
// const searchForm = reactive({
//
// })

const form = ref({
 "name":null,
  "phone":null,
  "password":null
})
//用户添加
const handelAdd =()=>{
  adminDeliveryAdd(form.value).then(res=>{
    console.log(res.data)
    if (res.data.code){
      ElMessage({
        message: res.data.message,
        type: 'success',
    })
      handelQx()
      handelDelivery()
      }
  })
}
//取消操作
const handelQx = () =>{
  form.value= {
    "name":null,
    "phone":null,
    "password":null
  }
  dialogVisible.value=false
  handelDelivery()
}



const queryDeli = ref({
  current:1,
  size:5,
  name:null,
  phone:null,
  status:null,
  total:0
})
// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)

// 配送员列表数据
const deliverymenList = ref([])

const deliverMen = ref([])

const handelDelivery = () =>{
  adminDeliverySouSu(queryDeli.value).then(res=>{
    console.log(res.data)
    if (res.data.code == 200){
      deliverMen.value=res.data.data.records
      queryDeli.value.total=res.data.data.total
    }
  })
}
handelDelivery()
// 对话框相关
const dialogVisible = ref(false)
const dialogType = ref('add')
const deliverymanFormRef = ref(null)
const deliverymanForm = reactive({
  name: '',
  phone: '',
  password: ''
})

// 表单验证规则
const deliverymanRules = {
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
  ]
}

// 获取状态类型
const getStatusType = (status) => {
  const statusMap = {
    0: '空闲',
    1: '忙碌',
    2: '离线'
  }
  return statusMap[status] || 'info'
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    0: '空闲',
    1: '忙碌',
    2: '离线'
  }
  return statusMap[status] || '未知'
}

// 搜索
const handleSearch = () => {
  // TODO: 实现搜索逻辑
  queryDeli.value.current=1
  queryDeli.value.size=3
  handelDelivery()
}

// 重置搜索
const resetSearch = () => {
  location.reload()
}

// 分页大小改变
const handleSizeChange = (val) => {
  queryDeli.value.current=1
  queryDeli.value.size = val
  handelDelivery()
  // TODO: 重新加载数据
}

// 当前页改变
const handleCurrentChange = (val) => {
  queryDeli.value.current=val
  handelDelivery()
  // TODO: 重新加载数据
}

// 添加配送员
const handleAdd = () => {
  dialogType.value = 'add'
  deliverymanForm.name = ''
  deliverymanForm.phone = ''
  deliverymanForm.password = ''
  dialogVisible.value = true
}

// 编辑配送员
const handleEdit = (row) => {
  dialogType.value = 'edit'
  deliverymanForm.name = row.name
  deliverymanForm.phone = row.phone
  dialogVisible.value = true
}

// 重置密码
const handleResetPassword = (row) => {
  ElMessageBox.confirm(
    '确定要重置该配送员的密码吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    // TODO: 实现重置密码逻辑
    ElMessage.success('密码重置成功')
  })
}

// 切换配送员状态
const handleToggleStatus = (row) => {
  const action = row.status === 'offline' ? '启用' : '禁用'
  ElMessageBox.confirm(
    `确定要${action}该配送员吗？`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    // TODO: 实现状态切换逻辑
    row.status = row.status === 'offline' ? 'idle' : 'offline'
    ElMessage.success(`配送员已${action}`)
  })
}

// 提交表单
const handleSubmit = async () => {
  if (!deliverymanFormRef.value) return

  await deliverymanFormRef.value.validate((valid) => {
    if (valid) {
      // TODO: 实现提交逻辑
      ElMessage.success(dialogType.value === 'add' ? '添加成功' : '修改成功')
      dialogVisible.value = false
    }
  })
}
// 新的路程图步骤数据
const timelineSteps = ref([
  { title: '注册申请', description: '提交配送员注册信息', color: '#FF6B6B' },
  { title: '资料审核', description: '等待管理员审核资料', color: '#F39C12' },
  { title: '培训考核', description: '完成培训并通过考核', color: '#2ECC71' },
  { title: '正式上岗', description: '开始接收配送订单', color: '#3498DB' },
  { title: '绩效提升', description: '持续提升配送绩效', color: '#9B59B6' }
])

// 轮播图图片路径
const deliveryImages = ref([
  '生成配送员背景图.png',
  '生成配送员背景图5.png'
]);
</script>

<style scoped>
.page-container {
  padding: 32px;
  min-width: 900px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e6e9f0 100%);
  border-radius: 20px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.page-container:hover {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.search-card, .table-card {
  margin-bottom: 24px;
  border-radius: 18px;
  background-color: white;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  border: none;
  transition: all 0.3s ease;
}

.search-card:hover, .table-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

:deep(.el-table th) {
  background: linear-gradient(135deg, #4a90e2 0%, #357abf 100%);
  color: white;
  font-weight: 600;
  transition: background 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

:deep(.el-table th:hover) {
  background: linear-gradient(135deg, #357abf 0%, #286090 100%);
}

:deep(.el-table td) {
  color: #333;
  transition: background 0.3s ease;
}

:deep(.el-table tr:hover td) {
  background: #f8f9fa;
}

:deep(.el-button) {
  border-radius: 10px;
  transition: all 0.3s ease;
  font-weight: 500;
}

:deep(.el-button:hover) {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

:deep(.el-dialog) {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

:deep(.el-dialog__header) {
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
  padding: 18px 24px;
}

:deep(.el-dialog__title) {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

:deep(.el-form-item__label) {
  font-weight: 500;
  color: #555;
}

:deep(.el-input) {
  border-radius: 8px;
}

:deep(.el-select) {
  border-radius: 8px;
}

:deep(.el-pagination) {
  margin-top: 24px;
  display: flex;
  justify-content: flex-end;
}

:deep(.el-pagination__sizes) {
  margin-right: 16px;
}

:deep(.el-pager li) {
  border-radius: 50%;
  margin: 0 4px;
}

:deep(.el-pager li.active) {
  background-color: #4a90e2;
  color: white;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.table-card {
  margin-bottom: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.06);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.el-table {
  border-radius: 8px;
  overflow: hidden;
  margin-top: 10px;
}

:deep(.el-table th) {
  background: #f5f7fa;
  font-weight: 600;
  color: #606266;
}

:deep(.el-table td) {
  color: #606266;
}

:deep(.el-tag) {
  border-radius: 8px;
}

:deep(.el-button .el-icon) {
  margin-right: 4px;
}

:deep(.el-form--inline .el-form-item) {
  margin-right: 20px;
}

:deep(.el-dialog__body) {
  padding: 20px 30px;
}

:deep(.el-dialog__footer) {
  padding: 10px 30px 20px;
  border-top: 1px solid #ebeef5;
}

.colorful-timeline-new {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 0;
}

.timeline-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 1;
}

.step-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  z-index: 2;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.step-content {
  margin-top: 1rem;
  text-align: center;
}

.step-content h3 {
  color: #333;
  margin-bottom: 0.5rem;
}

.step-content p {
  color: #666;
  font-size: 0.9rem;
}

.step-line {
  position: absolute;
  top: 20px;
  left: 50%;
  width: 100%;
  height: 4px;
  z-index: 1;
}
.carousel-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  filter: brightness(0.9);
  transition: transform 0.5s ease;
}

.carousel-item:hover .carousel-image {
  transform: scale(1.02);
}

.carousel-caption {
  position: absolute;
  bottom: 20%;
  left: 10%;
  color: white;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
  max-width: 60%;
}

.carousel-caption h3 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.carousel-caption p {
  font-size: 1.2rem;
}

.deliverymen-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 32px;
  margin: 30px 0 10px 0;
}

.deliveryman-card {
  background: linear-gradient(135deg, #fafdff 70%, #e9f1fb 100%);
  border-radius: 20px;
  box-shadow: 0 6px 24px rgba(60,120,200,0.10), 0 1.5px 6px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  min-height: 210px;
  position: relative;
  transition: box-shadow 0.3s, transform 0.2s;
  overflow: hidden;
  padding: 0 0 18px 0;
}

.deliveryman-card:hover {
  box-shadow: 0 16px 48px 0 rgba(60,120,200,0.18), 0 4px 16px rgba(0,0,0,0.10);
  transform: translateY(-6px) scale(1.025);
}

.deliveryman-card-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 26px 0 26px;
}

.deliveryman-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a0c4ff 0%, #bdb2ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
  box-shadow: 0 2px 8px rgba(60,120,200,0.10);
}

.deliveryman-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.deliveryman-name {
  font-weight: bold;
  font-size: 18px;
  color: #1a2233;
}

.deliveryman-status {
  margin-top: 2px;
}

.deliveryman-card-body {
  padding: 12px 26px 0 26px;
  color: #4a5a6a;
  font-size: 15px;
  line-height: 2;
  background: rgba(255,255,255,0.7);
  border-radius: 12px;
  margin: 10px 18px 0 18px;
  box-shadow: 0 1px 4px rgba(60,120,200,0.04);
}

.deliveryman-card-actions {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 16px;
}

@media (max-width: 900px) {
  .deliverymen-card-grid {
    grid-template-columns: 1fr;
  }
}
</style>

